<template>
    <div class="face-course">
        <template v-if="list.length > 0">
            <div v-for="(v, i) in list" :key="i">
                <template v-if="v.length > 0">
                    <div class="list-warp">
                        <div class="title-tag">
                            <span>{{i === 0 ? $t('Theoretical_training') : $t('Practical_training')}}</span>
                        </div>
                        <div class="single-warpper" v-for="(item,index) in v" :key="index" @click="goDetail(item)">
                            <div class="left-box">
                                <p class="date-box">
                                    <span v-if="item.ilsStartTime">
                                        {{item.ilsStartTime.split(' ')[0]}}
                                    </span>
                                    <span v-if="item.ilsStartTime">({{$moment(item.ilsStartTime).format('dddd')}})</span>
                                    <span>
                                        {{item.ilsStartTime ? item.ilsStartTime.split(' ')[1].substring(0, item.ilsStartTime.split(' ')[1].lastIndexOf(':')) : '--'}}
                                            ~
                                            {{item.ilsEndTime ? item.ilsEndTime.split(' ')[1].substring(0, item.ilsEndTime.split(' ')[1].lastIndexOf(':')) : '--'}}
                                    </span>
                                    <span :class="item.stuStatus !== 5 && item.stuStatus !==6 ? item.stuStatus === 1 ? 'color_green' : 'color_red' : ''">{{signStatus(item.stuStatus)}}</span>
                                </p>
                                <p class="title">{{item.ilsTitle}}</p>
                            </div>
                            <van-icon name="arrow" color="#7f7f7f" size="18"/>
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <div v-else class="box-table white-bg" style="width:100%;height: 300px;">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                </div>
            </div>
        </div>
        <!-- 把按钮移动父级去是因为"设置translate后，内部的fixed元素会失效",父级的vueScroll设置了translate -->
        <!-- <div class="bottom-btns">
            <div class="btns">
                <router-link tag="div"  class="left-btn" :to="`/certifiedCourse/leaveList/${itmId}/${tkhId}`">{{ $t('Leave_application') }}</router-link>
                <router-link tag="div" class="right-btn" :to="`/certifiedCourse/penaltyRecord/${itmId}/${tkhId}`">{{ $t('Penalty_record') }}</router-link>
            </div>
        </div> -->
    </div>
</template>
<script>
export default {
    props: ['data'],
    data() {
        return {
            list: [],
            itmId: this.$route.params.itmId,
            tkhId: this.$route.params.tkhId,
            appStatus: 'Admitted'
        };
    },
    methods: {
        /**
         * 获取课程列表 */
        getList() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/face/course/lessons`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                this.list = [];
                if (res.data.length > 0) {
                    let theoreticalList = []; // 理论培训
                    let practicalList = []; // 实操培训
                    res.data.forEach(item => {
                        if (item.ilsTrainType === 0) {
                            theoreticalList.push(item);
                        } else {
                            practicalList.push(item);
                        }
                    });
                    this.list.push(theoreticalList);
                    this.list.push(practicalList);
                }
            });
        },
        goDetail(item) {
            this.$router.push({path: `/certifiedCourse/faceDetail/${this.itmId}/${this.tkhId}`, query: {appStatus: this.appStatus, id: item.ilsId}});
        },
        signStatus(val) {
            switch (val) {
            case 1:
                return '【' + this.$t('cos_check_in_status_normal') + '】';
            case 2:
                return '【' + this.$t('cos_check_in_status_be_late') + '】';
            case 3:
                return '【' + this.$t('cos_check_in_status_absence') + '】';
            case 4:
                return '【' + this.$t('ask_leave') + '】';
            case 5:
                return '【' + this.$t('cos_app_not_started') + '】';
            case 6:
                return '【' + this.$t('no_sign') + '】';
            default:
                return '【' + this.$t('cos_app_not_started') + '】';
            }
        }
    },
    filters: {
    },
    mounted() {
        if (window.localStorage.getItem('globalLang') === 'en') {
            this.$moment.locale('en-us');
        } else if (window.localStorage.getItem('globalLang') === 'hk') {
            this.$moment.locale('zh-hk');
        } else {
            this.$moment.locale('zh-cn');
        }
        this.getList();
    }
};
</script>
<style lang="less" scoped>
.face-course{
    .list-warp{
        margin-top: 10px;
        padding: 15px 15px 0;
        background: #fff;
        .title-tag{
            border-bottom: 1px solid #075ebb;
            > span{
                display: inline-block;
                background: #075ebb;
                color:#fff;
                font-size: 12px;
                padding: 4px 12px;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }
        }
        .single-warpper{
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            &:last-child{
                border-bottom: none;
            }
            .left-box{
                flex: 1;
                width: 100px;
                .date-box{
                    color:#7f7f7f;
                    font-size: 12px;
                    margin-bottom: 10px;
                    >span{
                        margin-right: 5px;
                    }
                    .color_red {
                        color: #d9001b
                    }
                    .color_green{
                        color:#70b603
                    }
                }
            }
            .title{
                word-break: break-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    .bottom-btns{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 56px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 10px;
        box-sizing: border-box;
        .btns{
            display: flex;
            .left-btn, .right-btn{
                width: 50%;
                padding: 8px 0;
                text-align: center;
                color:#fff;
            }
            .left-btn{
                background: #075ebb;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
            }
            .right-btn{
                background: #f59a23;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            }
        }
    }
}
</style>
